/* live css */

html,
body {
	height: 100%;
}
body {
	position: relative;
	color: #fff;
	background: #3f3e3f;
	overflow: hidden;
}
h1,
p,
time,
span {
	line-height: 1em;
}

.live-header {
	position: relative;
	padding-top: 36.8055%;
	text-align: center;
}
.live-header .img-wp {
	position: absolute;
	top: 0;
	left: 0;
	width: 65.2777%;
	height: 100%;
	overflow: hidden;
}
.live-header .live-info {
	position: absolute;
	top: 0;
	right: 0;
	width: 34.7223%;
	height: 100%;
}
.live-header .live-info time {
	display: block;
	margin-top: 18.8679%;
	color: #ff4a54;
	font-size: 70px;
}
.live-header .live-info h1 {
	margin-top: 11.3207%;
	font-size: 50px;
}
.live-header .live-info p {
	margin-top: 4.1509%;
	font-size: 30px;
}

.live-container ul li {
	position: relative;
	padding: 20px;
	height: 146px;
	background: #4a4a4a;
}
.live-container ul li:nth-child(2n) {
	background: #515151;
}
.live-container ul li.top {
	background: #50b84e;
	border: 1px solid #979797;
}
.live-container ul li.top .content .user-name {
	color: #4a4a4a;
}
.live-container .user-avatar {
	position: absolute;
	top: 20px;
	left: 40px;
	width: 106px;
	height: 106px;
}
.live-container .content {
	margin-left: 146px;
}
.live-container .content p {
	margin-top: 28px;
	font-size: 48px;
}
.live-container .content p.gift {
	margin-top: 5px;
	margin-bottom: 20px;
	color: #9b9b9b;
}
.live-container .content p.gift b {
	color: #fff;
	font-weight: normal;
}
.live-container .content .user-name {
	margin-right: 20px;
	color: #6ed56c;
}
.live-container time {
	position: absolute;
	top: 52px;
	right: 40px;
	color: #dcdcdc;
	font-size: 40px;
}
.live-container .content em {
	font-style: normal;
}
.live-container .content > span {
	color: #d8d8d8;
	font-size: 30px;
}
.live-container .content > span > .green {
	color: #6ed56c;
}
.live-container .content > span > .orange {
	color: #f1a425;
}

.live-header-short {
	padding-top: 13.3333%;
	background: #4a4a4a;
}
.live-header-short .live-info {
	left: 0;
	width: 100%;
	text-align: left;
}
.live-header-short .live-info time {
	position: absolute;
	top: 20.8333%;
	right: 60px;
	margin-top: 0;
}
.live-header-short .live-info h1 {
	position: absolute;
	top: 25.5%;
	left: 54px;
	margin-top: 0;
}
.live-header-short .live-info p {
	position: absolute;
	top: 63.5%;
	left: 54px;
	margin-top: 0;
}

.sequence {
	border-top: 1px solid #666;
}
.number {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 66px;
	height: 66px;
	color: #fff;
	font-size: 32px;
	line-height: 66px;
	text-align: center;
	background: #f5a623;
	border-radius: 10px;
}
.number-2 {
	background: #59de57;
}
.number-3 {
	background: #57dede;
}
.number-4 {
	background: #578ede;
}
.number-5 {
	background: #7a57de;
}
.sequence .content .user-name {
	color: #fff;
}